<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax业务流程封装</title>
</head>
<body>
    <script>
        // 返回promise对象的函数
        // promise then 是微任务
        function getDataByAjax(url) {
            // Promise 是es6提供的一个类，实例化的时候，立即执行传给它的执行器
            // executor 同步执行
            return new Promise((resolve,reject)=> {
                console.log('1111');
                // // 异步任务的容器
                // setTimeout(()=>{
                //     resolve('5555')
                // },2000)

                // 浏览器的兼容性 ie低版本不支持XMLHttpRequest
                const xhr = XMLHttpRequest ? 
                            new XMLHttpRequest() 
                            :new ActiveXObject('Microsoft.XMLHTTP')
                // 打开，主动请求数据
                console.log(xhr.readyState)// 0
                xhr.open('GET',url,false)
                console.log(xhr.readyState)// 1 http 请求通道打开
                xhr.onreadystatechange = function() {
                    console.log(xhr.readyState);// 2代表开始传输 3表示数据传输中 4表示完成所有数据的传输
                    if (xhr.readyState !== 4) return
                    // 304 Not Modifyed 性能优化 服务器端资源 
                    // 在多次请求中并没有发生改变(updata_time 文件) 304响应头，不传输响应体
                    // 前端 304 怎么办？   前端会去浏览器缓存中读取数据
                    // 协商缓存 服务器端决定是否使用缓存

                    if (xhr.status === 200 || xhr.status === 304) {
                        resolve(xhr.responseText)
                    } else {
                        reject(xhr.responseText || '请求失败')
                    }
                }
                xhr.send()
                console.log(xhr.readyState)
            }) 
        }
        (async function() {
            const p = getDataByAjax('https://api.github.com/users/qianmo1022/repos')
            console.log('2222');
            console.log(p);// pending 等待状态 Promise
            // await 后面是一个promise对象，await会等待promise对象的状态变为resolve或者reject
            try {
                const data = await p
                console.log('3333'); 
                console.log(p);// fulfilled 成功状态
                console.log(data);
            } catch (err) {
                console.log(err);
            }
            // const data = await p
            // // const data = await getDataByAjax('https://api.github.com/users/qianmo1022/repos')
            // console.log('3333'); 
            // console.log(p);// fulfilled 成功状态
            // console.log(data);
        })()
    </script>
</body>
</html>